<!-- 搜索组件 -->
<template>
  <div>
    <el-form 
    @submit.stop
    :inline="true"
    class="demo-form-inline">
      <el-form-item :label="typeName">
        <el-autocomplete
          v-model="state"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入内容"
          @select="handleSelect"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- {{ actorList }} -->
    <!-- <p v-for="data in actorList" :key="data.id">{{ data.actor_name }}</p> -->
  </div>
</template>

<script>
import httpApi from '@/http';
  export default {
    props:['typeName'],
    data() {
      return {
        state: '',
        actorList: [],
        timeout:  null,

        name:''
      }
    },
    watch: {
      actorList(newValue, oldValue) {
        this.$bus.$emit('Actor',newValue)
        // if(newValue == []){
        //   this.search()
        // }
      }
    },
    methods: {
      // 远程搜索
      querySearchAsync(queryString, cb) {
        var restaurants = this.actorList;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 3000 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        this.search()
        // console.log(item);
      },

      // 根据演员姓名模糊查询
      listActorsByName(){
        let params = {name: this.state.trim()}
        httpApi.actorApi.queryActorsByName(params).then(res=>{
          let data = JSON.parse(JSON.stringify(res.data.data).replace(this.name,'value'))
          this.actorList = data
        })
      },

      // 搜索演员列表
      search(){
        if(this.state.trim()== ''){
          this.loadAll()
        }else{
          this.listActorsByName()
        }
      },

      // 获取所有演员
      loadAll() {
        this.actorList = []
        if(this.$route.path === '/home/actor-list'){
          this.name = 'actor_name'
          httpApi.actorApi.queryAllActors().then(res=>{
            res.data.data.map(item=>{
              let data = JSON.parse(JSON.stringify(item).replace(this.name,'value'))
              this.actorList.push(data)
            })
          })
        }else if(this.$route.path === '/home/director-list'){
          this.name = 'director_name'
          httpApi.directorApi.queryAllDirectors().then(res=>{
            res.data.data.map(item=>{
              let data = JSON.parse(JSON.stringify(item).replace(this.name,'value'))
              this.actorList.push(data)
            })
          })
        }
      }
    },
    mounted () {
      // 初次加载所有演员
      this.loadAll()
      // console.log(this.$route)
      // this.$bus.$emit('Actor',aaa)

      // 添加路由
      // this.$router.addRoute({})
    },
  }
</script>

<style lang="scss" scoped>

</style>